<template>
    <a-table bordered size="small" :data-source="dataSource" :columns="columns" :pagination="false" :customRow="customRow">
        <template #bodyCell="{ column, text, index }">
            <template v-if="['columnDataType', 'columnType'].includes(column.dataIndex)">
                <div>
                    <a-select v-if="editableData[index]" v-model:value="editableData[index][column.dataIndex]" :options="option[column.dataIndex]"></a-select>
                    <template v-else>
                        {{ getcurcolumnsVal(column.dataIndex, text) }}
                    </template>
                </div>
            </template>
        </template>
    </a-table>
</template>
<script>
import { cloneDeep } from 'lodash';

export default {
    props: {
        dataSource: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            columns: [
                {
                    title: '源数据列',
                    dataIndex: 'columnCode',
                    width: '22%',
                },
                {
                    title: '数据类型',
                    dataIndex: 'columnDataType',
                },
                {
                    title: '列类型',
                    dataIndex: 'columnType',
                },
            ],
            option: {
                columnDataType: [
                    {
                        label: '字符',
                        value: 's',
                    },
                    {
                        label: '数字',
                        value: 'n',
                    },
                    {
                        label: '日期',
                        value: 'd',
                    },
                    {
                        label: '未知',
                        value: 'u',
                    },
                    {
                        label: '自动',
                        value: 'g',
                    },
                ],
                columnType: [
                    {
                        label: '数据列',
                        value: 1,
                    },
                    {
                        label: '条件列',
                        value: 2,
                    },
                    {
                        label: '未知列',
                        value: -1,
                    },
                ],
            },
            editableData: {},
        };
    },
    methods: {
        // 未开启编辑或结束编辑时，单元格的显示内容
        getcurcolumnsVal(key, val) {
            const curItem = this.option[key].find((item) => item.value === val);
            return curItem.label;
        },
        // 双击 编辑
        customRow(record, index) {
            return {
                onDblclick: (event) => {
                    console.log(event, record, index);
                    if (this.editableData[index]) {
                        this.save(index);
                        delete this.editableData[index];
                    } else {
                        this.edit(index);
                    }
                },
            };
        },
        edit(key) {
            this.editableData[key] = cloneDeep(this.dataSource.filter((item, index) => key === index)[0]);
        },
        save(key) {
            this.$emit('changeDataSource', key, this.editableData);
            // vue单向数据流，所以此处要用自定义事件来处理
            //  Object.assign(this.dataSource.filter(item => key === item.key)[0], this.editableData[key]);
            //  delete this.editableData[key];
        },
    },
};
</script>
<style lang="less" scoped>
.editable-cell {
    position: relative;
    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
        padding-right: 24px;
    }

    .editable-cell-text-wrapper {
        padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        margin-top: 4px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 28px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }
}
.editable-cell:hover .editable-cell-icon {
    display: inline-block;
}
</style>

<style>
:deep(.ant-select-dropdown) {
    z-index: 1201;
}
</style>
